<template>
<div id="qs-information">
  <navigation></navigation>
  <div class="banner">
    <p>QINGSHENG INFORMATION</p>
    <p>青胜资讯</p>
    <div class="item"></div>
  </div>
  <img class="pic" src="../../assets/images/information/info-2.jpg" />
  <div class="info-container">
    <div v-for="(item, index) of data" :class="['info-item',index !== 0 ? 'm-top': '']">
      <div class="top">
        <img @click="chooseInfo(item)" class="plus" src="../../assets/images/information/plus.png">
        <p @click="showDetail(item.id)">{{item.name}}</p>
      </div>
      <div v-if="item.flag" class="bottom">{{item.description}}</div>
    </div>
  </div>
  <p v-if="showMoreButton" class="more" @click="showMore">加载更多</p>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      tabIndex: 1,
      data: [],
      curPage: 1,
      pageNum: 0,
      showMoreButton: true
    }
  },
  created() {
    this.loadMore()
  },
  methods: {
    chooseInfo(item) {
      item.flag = !item.flag
    },
    loadMore() {
      NetworkUtil.request({
        url: '/api/news?page=' + this.curPage,
        method: 'get'
      }, info => {
        console.log(info.count);
        this.pageNum = Math.ceil(info.count / 6)
        console.log(this.pageNum);
        for (let item of info.data.data) {
          item.flag = false
        }
        this.data.push(...info.data.data)
      }, err => {
        console.log(err)
      })
    },
    showMore() {
      if (this.curPage < this.pageNum - 1) {
        this.curPage++
          this.loadMore()
      } else {
        this.showMoreButton = false
      }

    },
    chooseTab(tabIndex) {
      this.tabIndex = tabIndex
    },
    showDetail(id) {
      this.$router.push({
        name: 'articleDetail',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
